import React, { Component } from 'react'
import { bool,func,string } from 'prop-types'
import './index.scss'

export default class Model extends Component {
    // state={
    //     isShow:false
    // }
    hideModel = ()=>{
        this.props.close()
    }
    // 组织冒泡
    mainFn =(event)=>{
        event.stopPropagation()
    }
    OkModel = ()=>{
        this.props.ok()
    }
    toogle=()=> {
       this.props.toogle()
    }
  render() {
    return (
        <div className="boxx" onClick={this.hideModel} style={{
            display:this.props.state.isShow?'block':'none'
        }}>
            <div className="main" style={{ height:this.props.height }} onClick={this.mainFn}>
                <h4>{this.props.title}</h4>
                <div>
                    {this.props.children}
                    <p>
                        <button onClick={this.hideModel} id="submit">取消</button>
                        <button id="submit" onClick={this.OkModel}>确认</button>
                    </p>
                </div>
                <span onClick={this.hideModel}>X</span>
                <div>

            </div>
            </div>
            

        </div>
    )
  }
}
// 组件传值props的type类型
Model.propTypes = {
    isShow:bool,
    close:func,
    ok:func,
    height:string
}
// 组件传值props的类型的默认值
Model.defaultProps = {
    isShow:false,
    close:function(){

    },
    ok:function(){

    },
    height:"200px"
}